<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a
			{
				width: 10px;
				height: 10px;
				background-color: red;
			}
			
			.b
			{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="a" id="abc"></div>
		
		<script>
			let d = document.querySelector('#abc');
			
			d.onmousemove = function()
			{
				over();
			}
			
			d.onmouseout = function()
			{
				hidden();
			}
			
			function over()
			{
				d.className = 'b';
			}
			
			function hidden()
			{
				d.className = 'a';
			}
		</script>
	</body>
</html>